import '@wangeditor/editor/dist/css/style.css'; // 引入 css

import React, { useState, useEffect } from 'react';
import { Editor, Toolbar } from '@wangeditor/editor-for-react';
import { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor';

function MyEditor(props) {
    //console.log('props', props);
    type InsertFnType = (url: string, alt: string, href: string) => void;

    // editor 实例
    const [editor, setEditor] = useState<IDomEditor | null>(null); // TS 语法
    // const [editor, setEditor] = useState(null)                   // JS 语法

    // 编辑器内容
    const [html, setHtml] = useState('');

    // 模拟 ajax 请求，异步设置 html
    // useEffect(() => {
    //   setTimeout(() => {
    //     setHtml('<p>hello world</p>');
    //   }, 1500);
    // }, []);

    // 工具栏配置
    const toolbarConfig: Partial<IToolbarConfig> = {}; // TS 语法
    // const toolbarConfig = { }                        // JS 语法

    const jsonContent = [
        {
            type: 'paragraph',
            lineHeight: '1.8',
            children: [{ text: '', fontSize: '16px' }],
        },
    ];
    // 编辑器配置
    const editorConfig: Partial<IEditorConfig> = {
        // TS 语法
        // const editorConfig = {                         // JS 语法
        placeholder: '上传图片支持jpg、jpeg、png等多种格式，单张图片最大支持5MB<br/>视频请上传16:9的横版视频，单个视频最大支持20MB',
        MENU_CONF: {},
        defaultContent: jsonContent,
    };

    editorConfig.MENU_CONF['fontSize'] = {
        fontSizeList: [
            // 元素支持两种形式
            //   1. 字符串；
            //   2. { name: 'xxx', value: 'xxx' }
            '16px',
            '17px',
            '18px',
            '19px',
            '20px',
            { name: '24px', value: '24px' },
            '40px',
        ],
    };

    editorConfig.MENU_CONF['lineHeight'] = {
        lineHeightList: ['1', '1.5', '1.6', '1.8', '2', '2.5'],
    };

    // 修改 uploadImage 菜单配置
    editorConfig.MENU_CONF['uploadImage'] = {
        server: '/api/file/upload',
        fieldName: 'file',
        maxFileSize: 5 * 1024 * 1024, // 10M
        customInsert(res: any, insertFn: InsertFnType) {
            // TS 语法
            // customInsert(res, insertFn) {                  // JS 语法
            // res 即服务端的返回结果

            // 从 res 中找到 url alt href ，然后插入图片
            console.log('res', res);
            insertFn('https://oss.yizuoyiyou.com.cn' + res.data.url, res.data.name, 'https://oss.yizuoyiyou.com.cn' + res.data.url);
        },
        // 继续写其他配置...

        //【注意】不需要修改的不用写，wangEditor 会去 merge 当前其他配置
    };

    editorConfig.MENU_CONF['uploadVideo'] = {
        server: '/api/file/upload',
        fieldName: 'file',
        maxFileSize: 1024 * 1024 * 1024, // 10M
        customInsert(res: any, insertFn: InsertFnType) {
            // TS 语法
            // customInsert(res, insertFn) {                  // JS 语法
            // res 即服务端的返回结果

            // 从 res 中找到 url poster ，然后插入视频
            //insertFn(url, poster)
            insertFn('https://oss.yizuoyiyou.com.cn' + res.data.url, res.data.name, 'https://oss.yizuoyiyou.com.cn' + res.data.url);
        },
    };

    // 及时销毁 editor ，重要！
    useEffect(() => {
        return () => {
            if (editor == null) return;
            editor.destroy();
            setEditor(null);
        };
    }, [editor]);

    return (
        <>
            <div style={{ border: '1px solid #ccc', zIndex: 100 }}>
                <Toolbar
                    editor={editor}
                    defaultConfig={toolbarConfig}
                    mode="default"
                    style={{ borderBottom: '1px solid #ccc' }}
                />
                <Editor
                    defaultConfig={editorConfig}
                    value={props.value}
                    onCreated={setEditor}
                    onChange={(editor) => props.onChange(editor.getHtml())}
                    mode="default"
                    style={{ height: '500px', overflowY: 'hidden' }}
                />
            </div>
            {/* <div style={{ marginTop: '15px' }}>{html}</div> */}
        </>
    );
}

export default MyEditor;
